import React, { useEffect, useState } from 'react';
import { Box, Datepicker, GridCarousel, GridItem, Icon, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { FiberProvider, useFiberOrderActivationTimeQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

type ActivateFiberProps = {
  color: MainColorType;
  provider: FiberProvider;
  onComplete: (date: Date) => void;
};

export const ActivateFiber = ({ color, provider, onComplete }: ActivateFiberProps) => {
  const minDate = new Date();
  const [selectableHours, setSelectableHours] = useState<string[]>([]);
  const [activationDate, setActivationDate] = useState<Date>(new Date());
  const { t } = useTranslation('flutningur');

  const {
    data: activationTimesData,
    loading: activationTimesLoading,
    error,
  } = useFiberOrderActivationTimeQuery({
    skip: !provider || provider === FiberProvider.Tengir,
    variables: {
      input: {
        fiberProvider: provider,
      },
    },
  });

  const providerIsTengir = provider === FiberProvider.Tengir;

  const sixtyDaysFromNow = new Date();
  sixtyDaysFromNow.setDate(sixtyDaysFromNow.getDate() + 60);

  const fetchLastAvailableDate = (): Date => {
    const activationTimes = activationTimesData?.fiberOrderActivationTimes;
    const length = activationTimes?.length;
    if (length && typeof activationTimes[length - 1] === 'string') {
      return new Date(activationTimes[length - 1] as string);
    }
    return sixtyDaysFromNow;
  };

  const onDateSelect = (date: Date) => {
    const newDate = new Date(date);
    setActivationDate(newDate);
  };

  const onSelectHour = (selection: number) => {
    const newDate = new Date(activationDate);
    newDate.setHours(selection);
    onComplete(newDate);
  };

  useEffect(() => {
    if (activationTimesData?.fiberOrderActivationTimes?.length && activationDate) {
      const filteredOutHours = activationTimesData.fiberOrderActivationTimes.filter((date) => {
        const cleanDate = new Date(date as string).setHours(0, 0, 0, 0);
        const cleanSelectedDate = activationDate?.setHours(0, 0, 0, 0);
        return cleanDate === cleanSelectedDate;
      });

      setSelectableHours(filteredOutHours);
    }
  }, [activationDate, activationTimesLoading]);

  return (
    <>
      <Box width={{ sm: '100%', xl: '8/12' }}>
        <Text variant="subtitleBold">{t('flutningur.new.activateFiber.title')}</Text>
        <Text>{t('flutningur.new.activateFiber.subtitle')}</Text>
      </Box>
      <Datepicker
        color={color}
        onSelect={onDateSelect}
        selected={activationDate || minDate}
        value={activationDate || minDate}
        inputId={'activationDate'}
        inputName={'activationDate'}
        dateFormat="d. MMMM"
        disabled={activationTimesLoading}
        minDate={minDate}
        maxDate={providerIsTengir ? fetchLastAvailableDate() : sixtyDaysFromNow}
        includedDates={activationTimesData?.fiberOrderActivationTimes}
      />
      {!providerIsTengir && (
        <Text variant="subtitleBold" marginTop={3} marginBottom={3}>
          {t('flutningur.new.activateFiber.pickTime')}
        </Text>
      )}
      <GridCarousel
        color={color}
        numberOnSlide={16}
        gridTemplate={{ sm: 4, md: 6, xl: 10 }}
        gridGap={{ sm: 2, lg: 3 }}
        backButtonHiddenTitle="Fyrri"
        nextButtonHiddenTitle="Næsta"
      >
        {!providerIsTengir &&
          selectableHours?.map((allowedTime, i) => {
            const isSelected =
              new Date(allowedTime).getHours() === new Date(activationDate).getHours();
            const date = new Date(allowedTime);
            const time1 = new Date(date).toLocaleTimeString('IS-is', {
              hour: '2-digit',
              minute: '2-digit',
            });
            return (
              <GridItem key={i} gridColumn={{ sm: 'span2' }}>
                <Box
                  renderAs="button"
                  width="100%"
                  display="flex"
                  justifyContent="space-around"
                  alignItems="center"
                  transition={'slow'}
                  borderColor={{
                    hover: color,
                    focusVisible: color,
                    sm: isSelected ? color : 'grey200',
                  }}
                  borderStyle="solid"
                  borderWidth="2px"
                  onClick={() => onSelectHour(new Date(allowedTime).getHours())}
                  dottedShadow="small"
                  backgroundColor="white"
                  cursor={{
                    hover: 'pointer',
                  }}
                >
                  <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                    padding={3}
                    gap={2}
                  >
                    <Icon icon="calendar" color={color} />
                    <Text variant="pLargeBold">{time1}</Text>
                  </Box>
                </Box>
              </GridItem>
            );
          })}
        {error && (
          <GridItem gridColumn={{ sm: 'span4', md: 'span6', xl: 'span8' }}>
            <Box display="flex" alignItems="center" marginTop={2}>
              <Icon icon={'info'} color={color} />
              <Text variant="pSmallRegular" color="attention" paddingLeft={1}>
                {t('flutningur.new.activateFiber.error')}
              </Text>
            </Box>
          </GridItem>
        )}
      </GridCarousel>
      {provider !== FiberProvider.Tengir && (
        <Box
          display="flex"
          alignItems="center"
          marginTop={{ md: 2 }}
          marginBottom={{ sm: 4, md: 1 }}
        >
          <Icon icon={'info'} color={color} />
          <Text variant="pSmallRegular" color={color} paddingLeft={1}>
            {t('flutningur.new.activateFiber.info')}
          </Text>
        </Box>
      )}
    </>
  );
};